<template>
  <section class="content" style="position: relative;">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">商品列表</h3>
      </div>
      <div class="form-horizontal">
        <div class="box-body p-tb-20">
          <div class="form-group no-margin">
            <div class="col-sm-10 p-l-0">
              <div class="row">
                <div class="col-sm-4 flex">
                  <label class="control-label bg-gray min-width">商品搜索：</label>
                  <div class="inline-block">
                    <input type="text" class="form-control" placeholder="商品名称/商品货号" v-model="productName">
                  </div>
                </div>
                <div class="col-sm-4 flex">
                  <label class="bg-gray control-label min-width">商品分类：</label>
                  <div class="inline-block" style="position: relative;">
                    <el-input class="linehe" style="height: 34px;line-height: 34px;"
                      placeholder="请选择商品分类"
                      v-model="formData.inspectObjectName"
                      suffix-icon="el-icon-arrow-down"
                      icon="caret-bottom"
                      readonly="readonly"
                      @click.native="isShowSelect = !isShowSelect">
                    </el-input>
                    <el-tree v-if="isShowSelect"
                             empty-text="暂无数据"
                             :expand-on-click-node="false"
                             :data="allCategoryAnalysis"
                             :props="defaultProps"
                             default-expand-all
                             @node-click="handleNodeClick"
                             class="objectTree">
                    </el-tree>
                    <!--<select class="form-control" v-model="selectCategoryId">-->
                      <!--<option value="">请选择商品分类</option>-->
                      <!--<optgroup :label="allCategoryAnalysisItem.categoryName"-->
                                <!--v-for="allCategoryAnalysisItem in allCategoryAnalysis">-->
                        <!--{{allCategoryAnalysisItem.categoryName}}-->
                        <!--<option v-for="productSelectItem in allCategoryAnalysisItem.children"-->
                                <!--:value="productSelectItem.categoryId">-->
                          <!--{{productSelectItem.categoryName}}-->
                        <!--</option>-->
                      <!--</optgroup>-->
                    <!--</select>-->
                  </div>
                </div>
                <div class="col-sm-4 flex">
                  <label class="control-label bg-gray min-width">商品品牌：</label>
                  <div class="inline-block">
                    <select class="form-control" v-model="brandSelectChoose">
                      <option value="">请选择品牌分类</option>
                      <option v-for="(brandSelectListItem,index) in brandSelectList" :value="brandSelectListItem.id">
                        {{brandSelectListItem.brandName}}
                      </option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-sm-2">
              <button class="btn btn-success m-r-10" @click="searchProduc">搜&nbsp;索</button>
              <button class="btn btn-danger" @click="resetProduct">重&nbsp;置</button>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </div>
    </div>
    <div class="form-group clearfix margin-bottom p-lr-10">
      <div class="col-sm-6 no-padding">
        <a class="btn btn-default btn-sm m-r-10" :class='[{ "btn-info" :0 ==activeIssue}]'
           @click="issueStatusFn(0)">全部</a>
        <a class="btn btn-default btn-sm m-r-10" :class='[{ "btn-info" :1 == activeIssue}]' @click="issueStatusFn(1,1)">上架中</a>
        <a class="btn btn-default btn-sm m-r-10" :class='[{ "btn-info" :2 == activeIssue}]' @click="issueStatusFn(2,0)">未上架</a>
      </div>
      <div class="col-sm-6 no-padding">
        <div class="checkbox pull-right m-t-5 margin-bottom-none">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title"></h3>
            <!--<button type="button" class="btn btn-info pull-left m-r-10">导出到U8</button>-->
            <button type="button" class="btn btn-primary pull-left m-r-10"
                    @click='toPath("/v1/goods/combination/addOrEdit")' v-if="$_has('sys:goodsCombination:add')">添加组合sku
            </button>
            <!--<button type="button" class="btn btn-info pull-left m-r-10">导入/导出</button>-->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-hover">
              <div class="overlay" v-if="show">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <thead>
              <tr>
                <!--<th>-->
                <!--<label>-->
                <!--<input type="checkbox" class="flat-red">-->
                <!--</label>-->
                <!--</th>-->
                <th style="width: 10%">商品图片</th>
                <th>商品信息</th>
                <th style="width: 10%;">状态</th>
                <th style="width: 15%">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="productList.length == 0">
                <td colspan="5">没有数据</td>
              </tr>
              <tr v-else v-for="productListItem in productList">
                <!--<td>-->
                <!--<input type="checkbox">-->
                <!--</td>-->
                <td>
                  <div class="imgW">
                    <img v-if="productListItem.goodsPic" :src="productListItem.goodsPic" alt="">
                    <img v-else src="@/assets/noPic.png" alt="">
                  </div>
                </td>
                <td class="text-left" style="padding-left: 25px;">
                  <label class="m-l-15">
                    <p>
                      <label>商品编码：</label>
                      <span>{{productListItem.sku}}</span>
                    </p>
                    <p>
                      <label>品牌名称：</label>
                      <span>{{productListItem.goodsCn}}</span>
                    </p>
                  </label>
                </td>
                <td>{{productListItem.status == 0 ? "未上架" : '上架中'}}</td>
                <td>
                  <div class="flex">
                      <span style="flex: 1">
                        <router-link :to='{path:"/v1/goods/combination/addOrEdit",query:{id:productListItem.id,readonly:true}}'
                          class="text-green m-lr-10" v-if="$_has('sys:goodsCombination:view')">查看</router-link>
                      </span>
                    <span style="flex: 1">
                      <router-link :to='{path:"/v1/goods/combination/addOrEdit",query:{id:productListItem.id,readonly:false}}'
                        class="text-green m-lr-10"
                        v-if="$_has('sys:goodsCombination:edit') && productListItem.status == 0">编辑</router-link>
                      </span>
                    <span style="flex: 1">
                      <a class="text-green" @click="deleteComfrim(productListItem.id)"
                         v-if="$_has('sys:goodsCombination:delete') && productListItem.status == 0">删除</a>
                      </span>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
            <div class="clearfix" v-if="productList.length != 0">
              <div class="m-t-15 pull-right">
                <pagination :total="pages.total" :current-page='pages.current'
                            @pagechange="pagechange"></pagination>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <div class="treeSelect" v-if="isShowSelect" @click.self.prevent="isShowSelect = false"></div>
  </section>
</template>

<script>
  import pagination from '@/components/common/pageComponent'
  import instance from '@/api/index.js'

  export default {
    name: "goodsOfJoint",
    data() {
      return {
        show: false,//loading
        item: '',
        productList: [],//获取商品列表
        productListParam: {},//商品列表查询
        analysisStatus: new Map,//状态解析
        productClassify: [],//根据分类层级查询分类信息
        forEachIndex: 0,//递归下标
        productClassifyMap: new Map,//获取子叶商品分类
        productSelect: [],//解析Map数据
        selectCategoryId: '',
        brandSelectChoose: "",//品牌下拉选择
        brandSelectList: [],//品牌下拉列表
        productName: "",//搜索商品名称和商品货号
        activeIssue: 0,//添加class
        pages: {
          total: 0,
          pageNum: 1,
          current: 1
        },

        allCategoryAnalysis: [],//商品分类
        allCategory: [],
        classificationList: [],
        formData: {
          // 传给后台的id
          inspectObject: "",
          // 输入框显示的
          inspectObjectName: ""
        },
        // 是否显示巡检对象的树状选择器
        isShowSelect: false,
        // 巡检对象的选项数据
        inspectionObjectOptions: [],
        // 巡检对象的选项的配置参数
        defaultProps: {
          id: "categoryId",
          label: 'categoryName',
          children: 'children'
        },
      }
    },
    mounted() {
    },
    methods: {
      //分页
      pagechange: function (currentPage) {
        this.productListParam.page = currentPage;
        this.pages.current = currentPage;
        this.getProductListFn();
      },

      //获取商品列表数据
      getProductListFn: function () {
        let vm = this;
        vm.show = true;
        instance({
          method: 'post',
          url: 'v1/goods/combination/getList',
          params: vm.productListParam
        }).then(function (data) {
          console.log(data)
          if(data.data.success){
            vm.productList = data.data.data.list;
            vm.pages.total = data.data.data.total;
            console.log(data.data.data.list);
            vm.show = false;
          }else {
            vm.show = false;
          }
        }).catch(function (err) {
          console.log(err)
        })
      },

      handleNodeClick(data, Node) {
        // 如果是顶级父节点
        this.formData.inspectObjectName = data.categoryName;
        this.formData.inspectObject = data.categoryId;
        this.productListParam.categoryId = data.categoryId;

        // 关闭选择器
        this.isShowSelect = false;
      },

      //获取所有商品分类树
      getAllCategory: function () {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/goods/category/getAll',
        }).then(function (data) {
          if (data.data.success) {
            let menus = data.data.data;
            vm.allMenu = menus;
            vm.menuListCheck = [];
            vm.getData(null,menus);
            vm.depositMenus = [];
            for (let i = 0; i < vm.menuListCheck.length; i++){
              if(vm.menuListCheck[i].categoryParentId == null){
                vm.depositMenus.push(vm.menuListCheck[i])
              }
            }
            console.log(vm.depositMenus)
            vm.allCategoryAnalysis = vm.depositMenus;
          }
          //
          // vm.classificationListL2 = vm.allCategoryAnalysis
        })
      },

      getData: function (id, arry) {
        let vm = this;
        var childArry = this.familyTree(id, arry);
        if (childArry.length > 0) {
          for (var i = 0; i < childArry.length; i++) {
            let obj = {};
            obj = childArry[i];
            childArry[i].children = this.familyTree(childArry[i].categoryId, arry);
            childArry[i].show = false;
            vm.menuListCheck.push(obj);
            vm.getData(childArry[i].categoryId, arry);
          }
        }
      },
      //
      familyTree: function (id, arry) {
        var newArry = new Array();
        for (var i in arry) {
          if (arry[i].categoryParentId == id)
            newArry.push(arry[i]);
        }
        return newArry;
      },

      //上架和未上架查询
      issueStatusFn: function (index, status) {
        this.activeIssue = index;
        this.productListParam.status = status;
        this.getProductListFn();
      },

      //循环删除查询条件
      deleteClassifyCondition() {
        for (let key in this.productListParam) {
          delete this.productListParam[key]
        }
      },

      resetProduct: function () {
        for (let key in this.productListParam) {
          this.productListParam[key] = '';
        }
        this.formData.inspectObjectName = '';
        this.productName = '';
        this.brandSelectChoose = '';
        this.productListParam = {};
        this.getProductListFn();
      },

      //搜索
      searchProduc: function () {
        this.productListParam.name = this.productName;
        this.productListParam.brandId = this.brandSelectChoose;
        for (let key in this.productListParam){
          if(!this.productListParam[key]){
            delete this.productListParam[key];
          }
        }
        this.getProductListFn();
      },

      //获取商品分类下拉列表
      getProdectClassify: function () {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/goods/category/getList',
          params: {categoryLevel: 1}
        }).then(function (data) {
          vm.productClassify = data.data.data;
          console.log(data)
        });
      },

      //商品品牌下拉列表
      getProductBrand: function () {
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/goods/brand/getList',
          data: vm.productListParam
        }).then((data) => {
          vm.brandSelectList = data.data.data;
        })
      },

      //查看有库存和没库存
      hasInventory: function () {

      },

      //删除产品
      deleteComfrim: function (id) {
        let vm = this;
        vm.$confirm('此操作将删除此商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.deletePro(id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },

      deletePro: function (id) {
        let vm = this;
        instance({
          method: 'post',
          url: 'v1/goods/combination/delete',
          params: {
            id: id
          }
        }).then(function (data) {
          for (let key in vm.productListParam) {
            vm.productListParam[key] = "";
          }
          vm.getProductListFn();
          console.log(data)
        })
      },


      toPath: function (routers) {
        this.$router.push({path: routers})
      },
      getItem: function () {
        this.item = this.$route.query.id
      }
    },
    created() {
      this.getItem();

      //获取商品列表数据
      this.getProductListFn();
      //获取商品分类下拉列表
      this.getAllCategory();
      //商品品牌下拉列表
      this.getProductBrand();
      this.analysisStatus.set(0, "未上架");
      this.analysisStatus.set(1, "上架中");
      this.analysisStatus.set(2, "删除");
    },
    components: {
      pagination
    },
    filters: {
      reserveDecimal: function (val) {
        var f = parseFloat(val);
        if (isNaN(f)) {
          return 0;
        }
        var f = Math.round(val * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      }
    }
  }


</script>

<style scoped>
  .objectTree {
    position: absolute!important;
    overflow: auto;
    z-index: 100;
    width: 100%;
    height: 300px;
    border: 1px solid #cccdce;
    border-top: none;
  }
  .linehe > input{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__inner{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-date-editor.el-input{
    width: 100%!important;
  }
  .imgW{
    width: 120px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content:center;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
  .imgW img{
    height: 100%;
  }

  .treeSelect{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    z-index: 99;
    background: rgba(255,255,255,0);
  }
</style>

